<template>
  <div class="give_lesson">
    <el-dialog title="赠课" :visible.sync="visible" @close="handleCancel">
      <el-row>
        <el-col :span="4">学员姓名：</el-col>
        <el-col :span="20">
          <div class="grid-content bg-purple-light">
            {{studentInfo.name}}
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">赠送次课次数：</el-col>
        <el-col :span="19">
          <el-input-number v-model="givenNum" size="small" :max="999" placeholder="请输入赠课次数"></el-input-number>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3">有效期：</el-col>
        <el-col :span="21">
          <el-date-picker 
            v-model="date" 
            type="daterange" 
            size="small" 
            placeholder="请选择有效期" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">赠送原因：</el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-radio-group v-model="selectedReason" @change="handleSelected">
            <el-radio v-for="(item, index) in causeList" :key="index" :label="item"></el-radio>
          </el-radio-group>
          <el-input class="textarea-height" v-if="selectedReason == '其他'" @change="handleOther" v-model.trim="reason" :maxlength="200" type="textarea" :rows="10" number-word />
          <div class="red" v-if="editReason">请输入赠课原因</div>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit" :disabled="!(selectedReason && date && givenNum && !editReason)">确 定</el-button>
        <el-button @click="handleCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import api from 'api/train'
export default {
  props: {
    isRenew: {
      type: Boolean,
      default: true
    },
    studentInfo: {
      type: Object
    }
  },
  data () {
    return {
      visible: true,
      givenNum: '',
      date: '',
      selectedReason: '',
      causeList: ['新学员优惠', '老学员优惠', '活动赠送', '团报优惠', '特殊优惠', '其他'],
      reason: '',
      editReason: false
    }
  },
  methods: {
    handleCancel () {
      this.$emit('input', false)
    },
    handleSelected (value) {
      if (value === '其他') {
        this.editReason = true
      } else {
        this.editReason = false
        this.reason = ''
      }
    },
    handleOther (value) {
      if (!value.trim()) {
        this.editReason = true
      } else {
        this.editReason = false
      }
    },
    handleSubmit () {
      let obj = {
        donateTimes: this.givenNum,
        studentId: this.studentInfo.studentId,
        classId: this.studentInfo.classId,
        studentSignupId: this.studentInfo.studentSignupId,
        donateReason: this.selectedReason === '其他' ? this.reason : this.selectedReason,
        expiresStartTime: this.date[0] ? new Date(this.date[0]).getTime() : '',
        expiresEndTime: this.date[1] ? new Date(this.date[1]).getTime() : ''
      }
      api.givenLessons(obj).then(res => {
        this.$emit('success').$emit('input', false)
      })
    }
  }
}
</script>

<style lang="scss">
  .give_lesson {
    .el-col{
      line-height: 36px;
    }
    .el-radio-group {
        margin-left: 20px;
       .el-radio {
         width: 30%;
         padding-bottom: 15px;
       }
    }
    .el-textarea {
      margin-left: 20px;
      width: 90%;
    }
    .textarea-height{
      .el-textarea__inner{
        height: 80px;
      }
    }
    .red {
      color: #ff4949;
      font-size: 12px;
      line-height: 1;
      padding-top: 5px;
      margin-left: 20px;
    }
  }
</style>
